import React, { Component } from 'react';
import Nav from '../nav/nav';
import './OrderDetils.scss';
class OrderDetils extends Component {
    state = {
        isAgree: true,
        user_iphone: "",
        goodsData: [{
            title: "多功能私享按摩椅",
            goods_id: 1343334035,
            pic: "https://yanxuan-item.nosdn.127.net/c238c40ce43643b3f73dc44ea08aa616.png",
            preSellPrice: 2299,
            specList: [{ specName: "颜色", specValue: "白色+咖啡色" }],
            goodsNum: 1,
            selectState: true
        }, {
            title: "智能前驱椭圆机智能前驱椭圆智能前驱椭圆",
            goods_id: 1343242061,
            pic: "https://yanxuan-item.nosdn.127.net/6aff6f74c39cf26153c98a4f580840da.png",
            preSellPrice: 3299,
            specList: [{ specName: "规格", specValue: "前驱" }],
            goodsNum: 2,
            selectState: true
        }, {
            title: "女式纯棉条纹居家套装",
            goods_id: 1343242081,
            pic: "https://yanxuan-item.nosdn.127.net/7920b2d4e46c41300a6f019a2ab92a56.png",
            preSellPrice: 169,
            specList: [{ specName: "颜色", specValue: "浅杏白条" }, { specName: "尺码", specValue: "XL" }],
            goodsNum: 4,
            selectState: true
        }]
    }
    placeOrder = () => {
        alert("订单提交成功")
    }
    changeChecked = () => {
        let checkedState = this.state.isAgree ? false : true;
        this.setState({
            isAgree: checkedState,
        })
    }


    componentDidMount() {
        this.encryptionIphone();
    }
    encryptionIphone = () => {
        let iphone = "01234567891";
        let iphoneArr = iphone.split("");
        let newIphone = [];
        for (let i = 0; i < iphoneArr.length; i++) {
            // console.log(i === 3)
            if (i === 3 || i === 4 || i === 5 || i === 6) {
                newIphone.push("*");
            } else {
                newIphone.push(iphoneArr[i]);
            }
        }
        this.setState({
            user_iphone: newIphone.join("")
        })
    }


    render() {
        return (
            <div className="orderDeils">
                <Nav title={"订单详情"}></Nav>

                <div className="deilsContent">

                    <div className="fraudPrevention">
                        <div className="fraudPreventionLeft">
                            <img src="//yanxuan.nosdn.127.net/939c226828381b3d8a2f7872f5c1a6d3.png" alt="" />
                        </div>
                        <div className="fraudPreventionRigth">
                            关于近期不法分子冒充客服实施诈骗的公告
                        </div>
                    </div>

                    <div className="detilsHeader">
                        <div className="orderDetils">
                            <div className="detilsHeaderLeft">
                                <div className="userNameAndIpone">
                                    <div className="userName">哈哈先生</div>
                                    <div className="userIphone">{this.state.user_iphone}</div>
                                </div>
                                <div className="userAddress"><span>默认</span>河南省濮阳市范县陆集乡</div>
                            </div>
                            <div className="detilsHeaderRigth">&gt;</div>
                        </div>
                    </div>

                    <div className="coupon">
                        <div className="couponTop">
                            <div className="couponTopLeft">暂无可用优惠卷</div>
                            <div className="couponTopRigth">
                                <span>1张</span>&gt;
                            </div>
                        </div>
                        <div className="couponMiddle">
                            <div className="couponMiddleLeft">
                                <input type="checkbox" name="" id="" />
                                <div className="couponMiddle">礼品卡余额：￥0.00</div>
                            </div>
                            <div className="couponMiddleRigth">&gt;</div>
                        </div>
                        <div className="couponMiddle">
                            <div className="couponMiddleLeft">
                                <input type="checkbox" name="" id="" />
                                <div className="couponMiddle">回馈金余额：￥0.00</div>
                            </div>
                            <div className="couponMiddleRigth">&gt;</div>
                        </div>
                    </div>

                    <div className="piceList">
                        <div className="piceListItme">
                            <div className="text">商品合计</div>
                            <div className="pices">￥<span>00.00</span></div>
                        </div>
                        <div className="piceListItme">
                            <div className="text">邮费</div>
                            <div className="pices">￥<span>00.00</span></div>
                        </div>
                        <div className="piceListItme">
                            <div className="text">活动优惠</div>
                            <div className="pices">-￥<span>00.00</span></div>
                        </div>
                        <div className="piceListItme">
                            <div className="text">优惠卷</div>
                            <div className="pices">￥<span>00.00</span></div>
                        </div>
                        <div className="piceListItme">
                            <div className="text">新人红包</div>
                            <div className="pices">￥<span>00.00</span></div>
                        </div>
                        <div className="piceListItme">
                            <div className="text">
                                <input type="checkbox" />
                                <span>我要开发票</span>
                            </div>
                            <div className="pices">&gt;</div>
                        </div>
                    </div>

                    <div className="goodsList">
                        <div className="goodsListTitle">商品</div>

                        {
                            this.state.goodsData.map((v, i) => {
                                if (v.selectState) {
                                    return (
                                        <div className="goodsListItme" key={i}>
                                            <div className="goodsListItmeImg">
                                                <img src={v.pic} alt="" />
                                            </div>
                                            <div className="goodsListItmeText">
                                                <div className="itmeTitle">
                                                    <div className="title">{v.title}</div>
                                                    <div className="goodsNum">x <span>{v.goodsNum}</span></div>
                                                </div>
                                                <div className="specifications">
                                                    {
                                                        v.specList.map((val, ind) => {
                                                            return <span key={ind}>{val.specValue};</span>
                                                        })
                                                    }
                                                </div>
                                                <div className="goodsPice">￥<span>{v.preSellPrice}</span></div>
                                            </div>
                                        </div>
                                    )

                                }
                            })
                        }
                    </div>

                    <div className="isAgree">
                        <input type="checkbox" defaultChecked={this.state.isAgree} onChange={this.changeChecked} />
                        <div className="isAgreeText"><span>我已同意</span>《网易严选服务协议》</div>
                    </div>

                </div>

                <div className="deilsBottom">
                    <div className="totalPice">
                        应付：￥<span>70.00</span>
                    </div>
                    <div className={this.state.isAgree ? "placeOrder active" : "placeOrder"} onClick={this.state.isAgree ? this.placeOrder : ""}>提交订单</div>
                </div>
            </div>
        )
    }
}

export default OrderDetils;